<template>
  <div class="result-container">
    <div class="title-wrap">
      <span class="keywords" :keywords="(keywords = $route.params.keywords)">{{ $route.params.keywords }}</span>
      <span class="found">找到{{ count }}个结果</span>
    </div>

    <div class="tabs-wrap">
      <el-tabs v-model="activeIndex">
        <!-- 歌曲 -->
        <el-tab-pane label="歌曲" name="songs">
          <el-table :data="songs" stripe style="width: 100%" @row-click="onRowClick" v-show="!showEmpty">
            <el-table-column prop="index" width="60">
              <template slot-scope="scope">
                <Icon v-if="currentSong.id == scope.row.id" class="horn" type="horn" color="theme" />
                <span v-else class="song-order">{{ $utils.pad(scope.$index + 1) }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="音乐标题">
              <template slot-scope="scope">
                <div class="song-table-name-cell title-td">
                  <span class="song-table-name" :class="{ 'active-row': currentSong.id == scope.row.id }">{{ scope.row.name }}</span>
                  <Icon v-if="scope.row.mvId != 0" class="mv-icon" type="mv" :mvId="scope.row.mvId" color="theme" :size="18" />
                </div>
                <!-- 二级标题 -->
                <span v-if="scope.row.alias.length !== 0" class="title-desc">{{ scope.row.alias[0] }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="artistsText" label="歌手"> </el-table-column>
            <el-table-column prop="albumName" label="专辑"> </el-table-column>
            <el-table-column label="时长" width="100">
              <template slot-scope="scope">
                <span>{{ $utils.formatTime(scope.row.durationSecond) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="歌单" name="lists">
          <div class="playlist-cards" v-show="!showEmpty">
            <PlaylistCard
              :desc="`播放量：${$utils.formatNumber(item.playCount)}`"
              :id="item.id"
              :img="item.coverImgUrl"
              :name="item.name"
              v-for="(item, index) in playlists"
              :key="index"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="MV" name="mv">
          <div class="mvs" v-show="!showEmpty">
            <ul class="mvs-list-wrap">
              <li :key="mv.id" class="mvs-list-item" v-for="mv in mvs" @click="toMv(mv.id)">
                <MvCard :author="mv.artistName" :id="mv.id" :img="mv.cover" :name="mv.name" :playCount="mv.playCount" />
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="pageNum"
        :page-size="pageSize"
        class="pagination"
        v-show="!showEmpty"
      >
      </el-pagination>
    </div>

    <Empty class="empty" v-show="showEmpty">暂无结果</Empty>
  </div>
</template>

<script>
import { search, getSongDetail } from 'network/request'
import { mapState, mapMutations, mapActions } from '@/store/helper/music'
export default {
  name: 'result',
  data() {
    return {
      // 总条数
      total: 0,
      // 页码
      pageNum: 1,
      pageSize: 10,
      keywords: '',
      activeIndex: 'songs',
      songs: [],
      count: 0,
      playlists: [],
      mvs: [],
      songId: 0,
      type: 1,
      showEmpty: false
    }
  },
  watch: {
    keywords() {
      this._search()
    },

    activeIndex() {
      switch (this.activeIndex) {
        case 'songs':
          this.type = 1
          this.pageNum = 1
          break
        case 'lists':
          this.type = 1000
          this.pageNum = 1
          break
        case 'mv':
          this.type = 1004
          this.pageNum = 1
          break

        default:
          break
      }
      this._search()
    }
  },

  methods: {
    // 页码改变事件
    handleCurrentChange(val) {
      // 保存页码
      this.pageNum = val
      // 重新获取数据
      this._search()
    },

    async _search() {
      const resp = await search({
        s: this.keywords,
        type: this.type,
        limit: this.type === 1004 ? 8 : 10,
        offset: (this.pageNum - 1) * (this.type === 1004 ? 8 : 10)
      })
      if (resp.code !== 200) {
        return (this.showEmpty = true)
      }
      let result = resp.result
      if (result === undefined || result === null || Object.keys(result).length === 0) {
        return (this.showEmpty = true)
        // return this.$message.error('快滚！快滚！快滚！查不到！')
      }
      if (this.type === 1) {
        this.count = result.songCount
        if (result.songCount == 0) {
          return (this.showEmpty = true)
          //   return this.$message.error('快滚！快滚！快滚！查不到！')
        }
        // 获取歌单详情
        const newSongs = await this._getPlaylistDetail(result.songs.map(x => x.id))
        this.songs = newSongs
      } else if (this.type === 1000) {
        this.playlists = result.playlists
        this.count = result.playlistCount
      } else if (this.type === 1004) {
        this.mvs = result.mvs
        this.count = result.mvCount
      }
      this.total = this.count
      this.showEmpty = false
    },
    // 获取歌单详情
    async _getPlaylistDetail(trackIds) {
      let params = this.$utils.songDetailParams(trackIds)
      const { songs } = await getSongDetail(params)
      return songs.map(x => this.$utils.createSong(x))
    },
    onRowClick(row) {
      this.startSong(row)
      this.setPlaylist(this.songs)
    },
    toPlaylist(id) {
      this.$router.push(`/playlist?id=${id}`)
    },
    toMv(id) {
      this.$router.push(`/mv?id=${id}`)
    },
    ...mapMutations(['setPlaylist']),
    ...mapActions(['startSong'])
  },
  computed: {
    ...mapState(['currentSong'])
  }
}
</script>

<style lang="scss">
.el-tabs__nav-wrap::after {
  background-color: var(--border) !important;
}
.el-tabs__active-bar {
  background-color: $theme-color;
}

.el-tabs__item:hover,
.el-tabs__item.is-active {
  color: $theme-color;
}
</style>
<style lang='scss' scoped>
.result-container {
  .title-wrap {
    padding: 20px 32px;

    .keywords {
      display: inline-block;
      margin-right: 4px;
      font-size: $font-size-title-lg;
      font-weight: $font-weight-bold;
    }

    .found {
      font-size: $font-size-sm;
      color: var(--font-color-grey-shallow);
      letter-spacing: 2px;
    }
  }

  /deep/.tabs-wrap {
    padding: 0 32px;

    .el-table {
      .song-table-name-cell {
        @include text-ellipsis;
        display: flex;
        align-items: center;
        flex: 0 0 24px;
        margin-bottom: 8px;

        .active-row {
          color: $theme-color;
        }

        .song-table-name {
          overflow: hidden;
          @include text-ellipsis;
        }

        .mv-icon {
          width: 24px;
          margin-left: 4px;
        }
      }
      .title-td {
        color: var(--font-color-white);
      }
      .title-desc {
        color: var(--font-color-grey-shallow);
      }
    }

    .playlist-cards {
      display: flex;
      flex-wrap: wrap;
    }

    .mvs {
      .mvs-list-wrap {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -12px;

        .mvs-list-item {
          width: 25%;
          margin-bottom: 36px;
          padding: 0 12px;
        }
      }
    }
  }

  .pagination {
    padding: 0 32px;
    display: flex;
    justify-content: flex-end;
    margin: 36px 0;
  }
}
</style>
